<template>
	<div id="Form">
		<el-form label-width="120px">
			<p style="margin: 10px 0; font-weight: bold">基本选项：{{ title }}</p>
			<el-row type="flex" justify="left">
				<el-col :offset="0" :span="6">
					<el-form-item label="奖项等级:">
						<el-input v-model="form.name" style="width: 120px"></el-input>
					</el-form-item>
				</el-col>

				<el-col :offset="0" :span="6" style="position: relative">
					<el-form-item label="奖项排序:">
						<el-input v-model="form.name" style="width: 120px"></el-input>
						<span class="iconfont icon-wenhaoxiao" style="font-size: 18px; color: red; cursor: pointer">
							<i>数值越低展示顺序越靠前</i>
						</span>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="奖项类型:">
						<el-radio v-model="form.radio1" label="1">自选商品</el-radio>
						<el-radio v-model="form.radio1" label="2">礼品中心</el-radio>
						<el-radio v-model="form.radio1" label="3">商场礼品</el-radio>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="奖项名称:" :required="true">
						<el-input v-model="form.name" placeholder=""></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="奖项数量:" :required="true">
						<el-input v-model="form.name" placeholder=""></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="奖项图片:">
						<div class="upload-file">
							<div class="avatar-wrapper" v-if="show">
								<img ref="img" class="avatar" :src="avatar" alt="" />
								<span class="delete-icon" @click="removeFile()"
									><img src="@/assets/img/ico_feedback_delete@2x.png" alt=""
								/></span>
							</div>
							<!-- 文件上传按钮 -->
							<a href="javascript:void(0)" class="upload-icon" v-if="!show">
								<span class="iconfont icon-xiangji"></span>
								<input type="file" accept="image/*" capture="camera" id="file" name="file" @change="uploadFile" />
							</a>
						</div>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="奖品介绍:">
						<el-radio v-model="form.radio1" label="1">隐藏</el-radio>
						<el-radio v-model="form.radio1" label="2">展示</el-radio>
					</el-form-item>
				</el-col>
			</el-row>
			<p style="margin: 10px 0; font-weight: bold">兑奖选项：{{ title }}</p>
			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="兑奖方式:">
						<el-radio v-model="form.radio1" label="1">线下兑奖</el-radio>
						<el-radio v-model="form.radio1" label="2">客服兑奖</el-radio>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="操作提示:" :required="true">
						<el-input v-model="form.name" placeholder=""></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="联系方式:" :required="true">
						<el-input v-model="form.name" placeholder=""></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="联系地址:" :required="true">
						<el-input v-model="form.name" placeholder=""></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="兑奖期限:">
						<el-radio v-model="form.radio5" label="1">固定日期</el-radio>
						<el-radio v-model="form.radio5" label="2">固定时长</el-radio>
						<el-date-picker
							v-if="form.radio5 == 1"
							style="width: 100%"
							v-model="form.value1"
							type="datetimerange"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:default-time="['00:00:00']"
						>
						</el-date-picker>

						<div v-if="form.radio5 == 2" style="display: inline-block">
							<span style="font-size: 12px">领取后</span>
							<el-input style="width: 100px; margin: 0 5px" placeholder="当天" v-model="form.name"> </el-input>
							<span style="font-size: 12px">有效，有效天数为</span>
							<el-input style="width: 100px; margin-left: 5px" v-model="form.name"> </el-input>
						</div>
					</el-form-item>
				</el-col>
			</el-row>

			<p style="margin: 10px 0; font-weight: bold">其他说明</p>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="客服电话:" :required="true">
						<el-input v-model="form.name" placeholder=""></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="兑奖须知:" :required="true">
						<el-input
							style="width: 100%"
							maxlength="500"
							show-word-limit
							type="textarea"
							:rows="10"
							placeholder="请输入文本内容"
							v-model="form.textarea"
						>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="" :required="true">
						<el-button @click="handleResetForm">重置</el-button>
						<el-button @click="handleSubmit" type="primary">保存</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>
<script>
	export default {
		props: {
			title: {
				type: String,
				default: '选项一'
			}
		},
		data() {
			return {
				form: {},
				show: false,
				avatar: null,
				fileObj: null
			};
		},
		methods: {
			uploadFile(e) {
				var event = e || window.event;
				var target = event.target || e.srcElement;
				var file = target.files[0];
				// let isLt1M = file.size / 1024 / 1024 <= 1;
				// if (!isLt1M) {
				// 	return this.$message.error('上传图片大小不能超过1MB!');
				// }
				this.avatar = this.$getObjectURL(file);
				this.show = true;
				// let promise = this.$getImgTest_plus.call(this, e, target, file, 2, () => {}, 'avatar');
				// promise.then(() => {
				// 	this.$getImgNaturalDimensions(this.$refs['img'], (dimensions) => {
				// 		console.log(dimensions);
				// 		if (dimensions.w < 800 || dimensions.h < 800) {
				// 			this.$message.warning({
				// 				message: '图片尺寸不能小于 800 * 800',
				// 				duration: 1500
				// 			});
				// 			this.removeFile();
				// 		}
				// 	});
				// });

				// // this.uploadFile(e);
			},
			removeFile() {
				this.avatar = null;
				this.show = false;
				this.fileObj = null;
			},
			handleResetForm() {
				this.form = {};
			},
			handleSubmit() {
				console.log(this.form);
			}
		}
	};
</script>
<style lang='scss'>
	#Form {
		.upload-file {
			margin-left: 5px;
			.avatar-wrapper {
				width: 100px;
				height: 100px;
				position: relative;
				.avatar {
					width: 100%;
					height: 100%;
				}
				.delete-icon {
					position: absolute;
					right: -8px;
					top: -8px;
					width: 18px;
					height: 18px;
					line-height: 18px;
					text-align: center;
					cursor: pointer;
				}
			}
			.upload-icon {
				border: 1px solid rgba($color: #000000, $alpha: 0.2);
				position: relative;
				left: 0;
				display: inline-block;
				color: #fff;
				text-decoration: none;
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				.icon-xiangji {
					font-size: 28px;
					color: #333;
					margin-right: 0;
				}
				#file {
					opacity: 0;
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
				}
			}
		}
		.icon-wenhaoxiao {
			position: absolute;
			font-size: 14px !important;
			margin-left: 5px;
			i {
				display: none;
			}
			&:hover i {
				display: inline-block;
				width: 150px;
				height: 26px;
				line-height: 26px;
				font-style: normal;
				font-size: 12px;
				font-weight: bold;
				position: absolute;
				left: 30px;
				top: 0px;
				background-color: #0b7cdff0;
				color: #fff;
				border: 1px solid rgba($color: #000000, $alpha: 0.2);
				border-left: none;
				// box-sizing: border-box;
				border-radius: 4px;
				&::after {
					content: '';
					position: absolute;
					left: -16px;
					width: 0px;
					height: 0px;
					border: transparent solid;
				}

				&::after {
					border-width: 8px;
					border-right-color: #0b7cdff0;
					top: 5px;
				}
			}
		}
	}
</style>